import React, { Component } from 'react'
import { NavBar } from 'antd-mobile'
import SearchInput from '../../components/searchInput/SearchInput'
import './Category.scss'
import myaxios from '../../utils/myaxios'
import axios from 'axios'
class Category extends Component {
    constructor(props){
        super(props)
        //取消请求
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        productList: [],
        select_index: 0,
        productContent: []
    }
    //获取数据
    getStates = () => {
        //发送请求
        myaxios.get('categories',{
            cancelToken:this.source.token
        }).then(res => {
            this.setStates(res)
        }).catch(err => console.log(err))
    }
    // 设置数据
    setStates = (res, is_sele) => {
        let cate_state = {}
        if (!is_sele) {
            cate_state = {
                data: Date.now(),
                productList: res
            }
            localStorage.setItem('cate_state', JSON.stringify(cate_state))
        }
        this.setState({
            productList: res,
            productContent: res[0].children
        })
    }
    componentDidMount() {
        //判断本地是否有缓存
        let cate_state = JSON.parse(localStorage.getItem('cate_state'))
        //如果有缓存
        if (cate_state && cate_state.data) {
            let cate_time = cate_state.data
            let new_time = Date.now()
            if (new_time - cate_time > 60 * 60 * 1000) {
                //一个小时后过期
                this.getStates()
            } else {
                this.setStates(cate_state.productList, true)
            }
        } else {
            //没有缓存
            this.getStates()
        }
    }
    handClick = (e) => {
        let select_id = e.target.getAttribute('data-index')
        this.setState({
            select_index: parseInt(select_id),
            productContent: this.state.productList[select_id].children
        })
    }
    goClick = (e) => {
        let gos = e.target.getAttribute('data-in')
        this.props.history.push("/goodsList?cid=" + gos);

    }
    render() {
        return (
            <div className='yg-category'>
                {/* 分类头部开始 */}
                <div className='yg-category-nav-title'>
                    <NavBar className='nav-title'>商品分类</NavBar>
                </div>
                {/* 分类头部结束 */}
                {/* 搜索开始 */}
                <div className='yg-category-search'>
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索结束 */}
                {/* 商品分类内容开始 */}
                <div className='yg-category-product'>
                    {/* 左边部分 */}
                    <div className='yg-category-product-left' onClick={this.handClick}>
                        {
                            this.state.productList.map((v, i) => {
                                return (
                                    <div className={this.state.select_index === i ? 'active category-product-title' : "category-product-title"}
                                        key={v.cat_id}
                                        data-index={i}
                                    >
                                        {v.cat_name}
                                    </div>
                                )
                            })
                        }
                    </div>
                    {/* 右边部分 */}
                    <div className='yg-category-product-right'>
                        {
                            this.state.productContent.map((v, index) => {
                                // 标题开始
                                return (
                                    <div className="product-right-item" key={v.cat_id} onClick={this.goClick} data-in={v.cat_id}>
                                        {/* 商品标题开始 */}
                                        <div className='right-item-title'>
                                            {'/ '}{v.cat_name}{' /'}
                                        </div>
                                        {/* 商品标题结束 */}
                                        {/* 商品的内容开始 */}
                                        <div className='right-item-list'>
                                            {v.children && v.children.map((item) => {
                                                return (
                                                    <div className='right-list-item' key={item.cat_id}>
                                                        <div className="imagerWrapper">
                                                            <img src={item.cat_icon} alt="" data-in={item.cat_id} />
                                                        </div>
                                                        <div className="item-title">
                                                            {item.cat_name}
                                                        </div>
                                                    </div>
                                                )
                                            })}
                                        </div>
                                        {/* 商品的内容结束 */}
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                {/* 商品分类内容结束 */}
            </div>
        )
    }
}

export default Category